<template>
  <page-loading
    class="list"
    :loading.sync="pageLoading"
    :error.sync="pageError"
    :enable-pull-refresh="false"
    @reload="getData"
  >
    <video-item
      v-for="item in videos"
      :key="item.aid"
      :aid="item.aid"
      :bvid="item.bvid"
      :title="item.title"
      :coverPath="item.pic"
      :view="item.play"
      :danmaku="item.video_review"
      :duration="item.length"
      :allParams="item"
      layout="ltr"
    />
  </page-loading>
</template>

<script>
import PageLoading from '@/components/page-loading/PageLoading.vue'
import VideoItem from '@/components/video-item/VideoItem.vue'
import { apiGetVideos } from '@/api/space.js'
import pageLoadingMixin from '@/mixins/pageLoading'
export default {
  name: 'SpaceVideos',
  components: {
    VideoItem,
    PageLoading
  },
  mixins: [pageLoadingMixin],
  props: {
    mid: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      videos: null
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      apiGetVideos({
        mid: this.mid
      }).then(res => {
        const { code, data } = res
        if (code === 0 && data !== null) {
          const { list: { vlist } } = data
          this.videos = vlist
        } else {
          this.pageError = true
        }
      }).catch(err => {
        console.log(err)
        this.pageError = true
      }).finally(() => {
        this.pageLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .list{
    padding: {
      left: rem(5px);
      right: rem(5px);
    };
  }
</style>
